<template>
  <div class="home">
    <!-- 首页搜索框开始 -->
    <div class="search-header">
      <div class="location">东莞</div>
      <div class="search" @click.stop="goToSearch">
        <span class="icon-search"></span>
        <input type="text" placeholder="找电影、影院">
      </div>
      <div class="date">
        <div class="calendar">
          <span class="day">03</span>
        </div>
      </div>
    </div>
    <!-- 首页搜索框结束 -->
    <mt-swipe class="swiper-container">
      <mt-swipe-item>
        <img @click.stop="goTo(1)" src="./images/swiper/1.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(2)" src="./images/swiper/2.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(3)" src="./images/swiper/3.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(4)" src="./images/swiper/4.jpg" alt="">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 动态class,两种写法 -->
    <!-- 对象的写法 -->
    <!-- red 类名，key值 -->
    <!-- <div :class="{red:bool}">区域，动态class</div> -->
    <!-- 数组写法 -->
    <!-- <div :class="[{red:bool},'big']">区域，动态class</div>
    <button @click="bool=!bool">点击切换样式</button> -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "@/components/tabbar/Tabbar.vue"
export default {
  name: 'HomeView',
  data(){
    return {
      bool:false
    }
  },
  components:{
    Tabbar
  },
  methods:{
    goToSearch:function(){
      this.$router.push({
        path:"search_all"
      })
    },
    goTo:function(id){
      this.$router.push({
        path:"movie_detail",
        query:{
          movie_id:id
        }
      })
      // $router => 相当于router对象,提供路由跳转需要的相关方法
      // $route  => 提供路由的参数
      // console.log(this.$router);
      // console.log(this.$route);
      // // 带查询参数，变成 /register?plan=private
      // router.push({ path: 'register', query: { plan: 'private' }})
        // this.$router.go(-1);
        // this.$router.replace({
        //   path:"/cinema",
        //   query:{
        //     movieId:3
        //   }
        // })
        // this.$router.push({
        //   path:"/cinema",
        //   query:{
        //     movieId:3
        //   }
        // })
    }
  }
};
</script>
<style>

  .big{
    font-size: 100px !important;
  }
  .red{
    width: 300px;
    height: 300px;
    font-size: 20px;
    background-color: red;
  }
  

  .swiper-container{
    width: 100%;
    height: 3rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
  }
  .swiper-container img{
    width: 100%;
    height: 100%;
  }
  .search-header{
    font-size: .3125rem;
    color:white;
    position: fixed;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .location{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.0125rem solid #f1f1f1;
    border-radius: 0.2rem;
    text-align: center;
    padding: 0.1rem 0.18rem;
    color: #fff;
    background-color: hsla(0,0%,100%,.1);
    font-size: .25rem;
  }
  .search{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.0125rem solid #f1f1f1;
    border-radius: 0.3125rem;
    padding: 0.1rem 0.125rem;
    background-color: #fff;
  }
  .icon-search{
    color: black;
    font-size: .375rem;
  }
  .search input{
    border: none;
    outline: none;
    font-size: .3rem;
    margin-left: 0.125rem;
  }
  .date{
    display: flex;
    justify-content: center;
    align-items: center;    width: 0.6rem;
    height: 0.6rem;
    border: 0.0125rem solid #f1f1f1;
    border-radius: 0.425rem;
    background-color: hsla(0,0%,100%,.1);
  }
  .calendar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 76%;
    height: 76%;
    background: url() no-repeat;
    background-size: cover;
  }
  .calendar .day{
    position: relative;
    top: 0.45em;
    color: #fff;
    font-size: .6em;
  }
</style>
